<template>
  <div class="split-pane" :class="direction" :style="{ flexDirection: direction }" ref="splitPane">
    <div class="page split-pane-left" :style="{ [lengthType]: paneLengthValue }">
      <slot name="left"></slot>
    </div>
    <div class="split-pane-divider" :style="{ [lengthType]: triggerLengthValue }" @mousedown="handleMouseDown">
      <div class="divider-conten">
        <i class="trigger-bar"></i>
        <i class="trigger-bar"></i>
        <i class="trigger-bar"></i>
        <i class="trigger-bar"></i>
        <i class="trigger-bar"></i>
        <i class="trigger-bar"></i>
      </div>
    </div>
    <div class="split-pane-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
import { computed, defineProps, ref } from 'vue'
export default {
name: 'SplitPane',
  props: {
    direction: {
      type: String,
      default: 'row'
    },
    min: {
      type: Number,
      default: 10
    },
    max: {
      type: Number,
      default: 90
    },
    paneLengthPercent: {
      type: Number,
      default: 15
    },
    triggerLength: {
      type: Number,
      default: 3
    }
  },
  setup(props) {
    //const paneLengthPercent = ref(20) // 区域1宽度 (%)
    //const triggerLength = ref(2) // 滑动器宽度 （px）
    const triggerLeftOffset = ref(0)// 鼠标距滑动器左(顶)侧偏移量


    const splitPane = ref(null) // 区域1宽度 (%)
    const lengthType = computed(() => props.direction === 'row' ? 'width' : 'height')
    const paneLengthValue = computed(() => `calc(${props.paneLengthPercent}% - ${props.triggerLength / 2 + 'px'})`)
    const triggerLengthValue = computed(() => `calc(${props.triggerLength}px)`)

    const handleMouseDown = (e) => {
      const target = e.currentTarget;
      triggerLeftOffset.value = props.direction === 'row'
          ? e.clientX - target.getBoundingClientRect().left
          : e.clientY - target.getBoundingClientRect().top

      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp) // 监听鼠标松开事件
    }
    const handleMouseMove = (e) => {
      if (!splitPane.value) return
      const clientRect = splitPane.value.getBoundingClientRect()
      if (props.direction === 'row') {
        const offset = e.clientX - clientRect.left
        props.paneLengthPercent = (offset / clientRect.width) * 100
      } else {
        const offset = e.clientY - clientRect.top - triggerLeftOffset.value + props.triggerLength / 2
        props.paneLengthPercent = (offset / clientRect.height) * 100
      }
      if (props.paneLengthPercent < props.min) {
        props.paneLengthPercent = props.min
      }
      if (props.paneLengthPercent > props.max) {
        props.paneLengthPercent = props.max
      }

    }
    const handleMouseUp = (e) => {
      document.removeEventListener('mousemove', handleMouseMove)
    }
    return {
      splitPane,
      lengthType,
      paneLengthValue,
      triggerLengthValue,
      handleMouseDown
    }
  }
}





</script>

<style scoped>
.split-pane {
  height: 100%;
  display: flex;
}
.divider-conten {
  position: absolute;
  height: 40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}
.trigger-bar {
  width: 100%;
  height: 2px;
  display: block;
  background: rgba(23, 35, 61, 0.25);
  margin-top: 3px;
}
.page {
  height: 100%;
}
.split-pane-divider {
  width: 100%;
  background-color: #e3e5e7;
  cursor: col-resize;
  position: relative;
  user-select: none;
}

.split-pane-right{
  flex: 1;
  overflow: auto;
}
.split-pane-left{
  overflow: auto;
}
</style>